<template>
  <!-- 工单通知配置表单弹窗 -->
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="30%"
      height="20%"
      draggable
      @close="closeDialog"
    >
      <el-form
        v-show="!props.isReadonly"
        ref="formRef"
        :model="formData"
        :inline="true"
        :rules="rules"
      >
        <div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="工序" prop="processId" style="width: 100%">
                <el-select
                  v-model="formData.processId"
                  placeholder="请选择工序"
                  clearable
                >
                  <el-option
                    v-for="item in processList"
                    :key="item.id"
                    :label="`${item.processCode}`"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="图形分类"
                prop="abilityType"
                style="width: 100%"
              >
                <el-select
                  v-model="formData.abilityType"
                  placeholder="请选择图形分类"
                  clearable
                >
                  <el-option
                    v-for="item in useDictionary('AbilityType')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks" style="width: 100%">
                <el-input
                  v-if="!props.isReadonly"
                  v-model="formData.remarks"
                  type="textarea"
                  placeholder="请输入备注"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <el-descriptions
        v-show="props.isReadonly"
        title=""
        :column="2"
        size="large"
        border
        style="width: 99%; max-height: 70vh; overflow-y: auto"
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">工序</div>
          </template>
          {{ formData.processCode || "" }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">图形分类</div>
          </template>
          {{ useDictionary("AbilityType", formData.abilityType) || "" }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <div class="cell-item">角色</div>
          </template>
          <div style="width: 100%; word-break: break-all">
            {{ formData.responsibleRoleList || "" }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <div class="cell-item">上级领导</div>
          </template>
          <div style="width: 100%; word-break: break-all">
            {{ formData.leaderRoleList || "" }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template #label>
            <div class="cell-item">备注</div>
          </template>
          <div style="width: 100%; word-break: break-all">
            {{ formData.remarks || "暂无备注" }}
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!props.isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定
          </el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary";
import { useDictionary } from "@/utils/useTable"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "PCMPCMWORKORDERNOTICEADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);
/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  processId: "",
  processName: "",
  processCode: "",
  abilityType: "",
  responsibleRoleList: "",
  leaderRoleList: "",
  remarks: "",
});

/** rules规则 */
const rules = reactive({
  processId: [{ required: true, message: "请选择工序", trigger: "blur" }],
  abilityType: [{ required: true, message: "请选择图形分类", trigger: "blur" }],
  remarks: [],
  sonroleName: [],
});

const isValidated = ref(false);
/** 编辑时赋值 */
watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      Object.assign(formData, props.data);
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.processId = "";
  formData.processCode = "";
  formData.processName = "";
  formData.abilityType = "";
  formData.responsibleRoleList = "";
  formData.leaderRoleList = "";
  formData.remarks = "";
}

const loading = ref(false);

/** 工单通知配置保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      console.log("formData", toRaw(formData));
      const process = processList.value.find(
        (item: any) => item.id === formData.processId
      );
      formData.processName = process?.processName;
      formData.processCode = process?.processCode;
      await request({
        url: "/dmpDosPcm/pcmworkordernotice/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
      isValidated.value = false;
    } else {
      isValidated.value = true;
    }
  });
}

const processList: any = ref([]);
async function getProcessCodeList() {
  const { data } = await request({
    url: `/mdm/mdmprocess/getList`,
    method: "post",
    data: {},
  });
  processList.value = data;
}
onMounted(() => {
  getProcessCodeList();
});
</script>

<style lang="scss" scoped></style>
